<!--
 * @Author: chunlai
 * @Date: 2025-01-24 10:22:38
 * @LastEditTime: 2025-08-22 09:59:51
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\prenotice\simple\AutoNoticeAssess.vue
 * @Description: 智能核保评估 /nethealthy
-->
<template>
  <div class="auto-page">
    <header class="btm_line">
      <div class="back"><van-icon name="arrow-left" />返回</div>
      投保评估
    </header>
    <h2>选择被保人目前或过往患有的病症:</h2>
    <div class="main-cont">
      <div class="main-cont-lev1">
        <div
          class="lev1-item"
          :class="{ active: qIdx == index, checked: item.remark }"
          v-for="(item, index) in queryList"
          :key="`left-nav${index}`"
          @click="qIdx = index"
        >
          {{ item.questionContent }}
        </div>
      </div>
      <div class="main-cont-lev2">
        <div
          class="lev2-item"
          :class="isChoosed(item) ? 'active' : ''"
          v-for="(item, index) in detailList[qIdx]"
          :key="`left-nav${index}`"
          @click="checkItem(item)"
        >
          <div class="item-desc">
            {{ item.questionContent }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AutoNoticeAssess",
  components: {},
  data() {
    return {
      qIdx: 0,
      queryList: [],
      detailList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initPage();
  },
  mounted() {},
  methods: {
    initPage() {
      this.$store.commit("updateLoad", true);
      this.$store.dispatch("json/getNoticeJson", "autoform").then((res) => {
        // console.log(res);
        this.queryList = res.informDetailQueryDataList;
        this.detailList = res.informDetailList;
        this.$store.commit("updateLoad", false);
      });
    },
    isChoosed(item) {
      let res = false;
      const qItem = this.queryList[this.qIdx];
      let checks = qItem.remark.split(",");
      if (checks.includes(item.questionCode)) {
        res = true;
      }
      return res;
    },
    checkItem(item) {
      const qItem = this.queryList[this.qIdx];
      let checks = qItem.remark.split(",");
      if (checks.includes(item.questionCode)) {
        checks = checks.filter((ele) => ele != item.questionCode);
      } else {
        checks.push(item.questionCode);
      }
      this.$set(this.queryList[this.qIdx], "remark", checks.join(","));
    },
  },
};
</script>
<style lang="less" scoped>
.auto-page {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  header {
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #000;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    position: relative;
    background-color: #ffffff;
    .back {
      position: absolute;
      left: 12px;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 45px;
      font-size: 14px;
      color: #000;
      font-weight: 500;
    }
  }
  h2 {
    font-size: 18px;
    color: #4a4a4a;
    height: 50px;
    line-height: 50px;
    font-weight: 500;
    padding: 0 12px;
    text-align: left;
    width: 100%;
    background: #fff;
  }
  .main-cont {
    flex: 1;
    display: flex;
    overflow: hidden;
    &-lev1,
    &-lev2 {
      height: fit-content;
      height: 100%;
      color: #4a4a4a;
      padding-bottom: 30px;
      overflow: hidden;
      overflow-y: scroll;
    }
    &-lev1 {
      width: 120px;
      .lev1-item {
        padding: 6px 14px;
        line-height: 1.3;
        &.active {
          background-color: #ffffff;
        }
        &.checked {
          position: relative;
          &::before {
            content: "";
            position: absolute;
            top: 5px;
            right: 10px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #a6e0ff;
            z-index: 2;
          }
        }
      }
    }
    &-lev2 {
      flex: 1;
      background-color: #ffffff;
      .lev2-item {
        padding: 0 8px;

        .item-desc {
          padding: 10px 14px;
          line-height: 1.3;
          margin-bottom: 10px;
          border: 1px solid #ffffff;
        }
        &.active {
          background-color: #ffffff;

          .item-desc {
            border: 1px solid #a6e1ff;
            border-radius: 5px;
            color: #a6e1ff;
            position: relative;
            &::before {
              content: "";
              position: absolute;
              top: 5px;
              right: 5px;
              width: 14px;
              height: 14px;
              border-radius: 50%;
              font-weight: 600;
              background-color: #ff8989;
              z-index: 2;
            }
            &::after {
              content: "";
              position: absolute;
              top: 10px;
              right: 8px;
              width: 8px;
              height: 3px;
              background-color: #ffffff;
              z-index: 3;
            }
          }
        }
      }
    }
  }
}
</style>
